<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <sdn-button type="text" @click="dialogVisible = true">点击打开 Dialog</sdn-button>
      <sdn-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <sdn-button @click="dialogVisible = false">取 消</sdn-button>
          <sdn-button type="primary" @click="dialogVisible = false">确 定</sdn-button>
         </span>
      </sdn-dialog>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }
  },
  setup() {
    const btnDesc = {
      title: "Dialog 对话框",
      describe: "在保留当前页面状态的情况下，告知用户并承载相关操作",
      codeBlock: `<sdn-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <sdn-button @click="dialogVisible = false">取 消</sdn-button>
          <sdn-button type="primary" @click="dialogVisible = false">确 定</sdn-button>
         </span>
      </sdn-dialog>`,
      attrs: [
        {
          "name": "visible",
          "describe": "是否显示 Dialog，支持 .sync 修饰符",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE",
          "": ""
        }, {
          "name": "title",
          "describe": "Dialog 的标题，也可通过具名 slot （见下表）传入",
          "type": "string",
          "emun": "—",
          "default": "—",
          "": ""
        }, {
          "name": "width",
          "describe": "Dialog 的宽度",
          "type": "string",
          "emun": "—",
          "default": "50%",
          "": ""
        }, {
          "name": "fullscreen",
          "describe": "是否为全屏 Dialog",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE",
          "": ""
        }, {
          "name": "top",
          "describe": "Dialog CSS 中的 margin-top 值",
          "type": "string",
          "emun": "—",
          "default": "15vh",
          "": ""
        }, {
          "name": "modal",
          "describe": "是否需要遮罩层",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "modal-append-to-body",
          "describe": "遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "append-to-body",
          "describe": "Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE",
          "": ""
        }, {
          "name": "lock-scroll",
          "describe": "是否在 Dialog 出现时将 body 滚动锁定",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "custom-class",
          "describe": "Dialog 的自定义类名",
          "type": "string",
          "emun": "—",
          "default": "—",
          "": ""
        }, {
          "name": "close-on-click-modal",
          "describe": "是否可以通过点击 modal 关闭 Dialog",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "close-on-press-escape",
          "describe": "是否可以通过按下 ESC 关闭 Dialog",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "show-close",
          "describe": "是否显示关闭按钮",
          "type": "boolean",
          "emun": "—",
          "default": "TRUE",
          "": ""
        }, {
          "name": "before-close",
          "describe": "关闭前的回调，会暂停 Dialog 的关闭",
          "type": "function(done)，done 用于关闭 Dialog",
          "emun": "—",
          "default": "—",
          "": ""
        }, {
          "name": "center",
          "describe": "是否对头部和底部采用居中布局",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE",
          "": ""
        }, {
          "name": "destroy-on-close",
          "describe": "关闭时销毁 Dialog 中的元素",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE",
          "": ""
        }],
      slots: [
        {"name": "—", "describe": "Dialog 的内容"}, {
          "name": "title",
          "describe": "Dialog 标题区的内容"
        }, {"name": "footer", "describe": "Dialog 按钮操作区的内容"}],
      events: [
        {"name": "open", "describe": "Dialog 打开的回调", "params": "—"}, {
          "name": "opened",
          "describe": "Dialog 打开动画结束时的回调",
          "params": "—"
        }, {"name": "close", "describe": "Dialog 关闭的回调", "params": "—"}, {
          "name": "closed",
          "describe": "Dialog 关闭动画结束时的回调",
          "params": "—"
        }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
